<template>
	<view class="container" :style="{height:getNavBarHeight()+'px'}">
		<view class="left">
			<slot name="left"></slot>
		</view>
		<view class="search">
			<u-icon name="search"></u-icon>
			<text>搜索</text>
		</view>
	</view>

</template>

<script setup>
	import { getTitleBarHeight, getNavBarHeight, getStatusBarHeight } from '../../utils/system.js'
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;

		.left {
			font-size: 40rpx;
			margin-right: 20px;
		}

		.search {
			width: 200rpx;
			height: 60rpx;
			border-radius: 30px;
			border: 1px solid #fff;
			display: flex;
			align-items: center;
			font-size: 12px;
			padding: 0 5px;
		}
	}
</style>